<template>
  <div>
    <ul class="item1">
      <li v-for="(item, i) in navData" :key="i" :class="{ nav_li: active === i }" @click="tabItem(i, item.id)">
        <p class="itemImg"><img :src="item.iconPath" alt="" /></p>
        <p class="itemName">{{ item.name }}</p>
      </li>
    </ul>
    <div class="itemDetail">
      <ui class="top">
        <li v-for="(it, i) in chicList" :key="i" @click="goItemPage(it.url)">
          <img :src="it.picturePath" alt="" />
        </li>
      </ui>
    </div>
  </div>
</template>
<script>
import base from '../../api/base.js'
export default {
  components: {},
  data() {
    return {
      active: 0,
      navData: [],
      chicList: [],
      proId: '',
    }
  },
  created() {},
  mounted() {},
  methods: {
    tabItem(i, id) {
      this.active = i
      console.log(id)
      this.navData.forEach((item) => {
        //   console.log(item, 'item.id')
        if (item.id == id) {
          this.chicList = item.platformInfoEntityList
        }
      })
    },
    goItemPage(url) {
      console.log(url, 'url')

      if (url.indexOf('http') == -1) {
        window.open(`http://${url}`)
      } else {
        window.open(url)
      }

      //
    },
    //获data
    getData() {
      this.$axios({
        method: 'get',
        url: `${base.baseUrlLz}/renren-admin/production/platformcategory/frontCategoryList`,
        // data: {
        //   page: 1,
        //   limit: 100,
        // },
      })
        .then((res) => {
          if (res.status === 200) {
            console.log(res.data, 'categoryList')
            this.navData = res.data.data
            this.proId = res.data.data[0].id
            console.log(this.proId, 'id')
            this.tabItem(0, this.proId)
          }
        })
        .catch()
    },
  },
  activated() {
    this.getData()
  },
  deactivated: {},
}
</script>
<style scoped>
.itemDetail {
  text-align: center;
  position: absolute;
  left: 300px;
  width: 1595px;
  top: 360px;
}
.top {
  text-align: center;
}
.itemDetail1 {
  text-align: center;
  position: absolute;
  left: 300px;
  top: 660px;
  margin-top: 40px;
}
.top li {
  list-style: none;
  float: left;
  margin-left: 80px;
  cursor: pointer;
  text-decoration: none;
}
.bottom li {
  list-style: none;
  float: left;
  cursor: pointer;
  margin-left: 80px;
  text-decoration: none;
}
</style>

<style>
.el-collapse {
  width: 150px;
  background: #f9fafb !important;
  float: right;
}
.fl {
  float: left;
}
.textLi {
  text-align: center;
}
.el-collapse-item__header {
  display: flex;
  align-items: center;
  height: 48px;
  line-height: 48px;
  background-color: #fff;
  color: #303133;
  cursor: pointer;

  font-size: 13px;
  font-weight: 500;
  transition: border-bottom-color 0.3s;
  outline: 0;
}
</style>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
/deep/#tab-home {
  width: 83px !important;
}
.detailsSwitchDi {
  display: flex;
}
.disHiden {
  display: block;
}
.disHiden2 {
  display: none;
}
.active1 {
  border-bottom: 4px solid #31adda;
}
.item > li > span {
  display: inline-block;
  width: 150px;
  height: 103px;
}
.jianzhu {
  background: url(../../assets/imges/建筑.png) -76px -31px no-repeat;
}

.detailsSwitchCk {
  cursor: pointer;
}
.traffic {
  background: url(../../assets/imges/交通行业.png) -76px -31px no-repeat;
}
.environmental {
  background: url(../../assets/imges/环保.png) -70px -31px no-repeat;
}
.hydraulic {
  background: url(../../assets/imges/水利水电item.png) -66px -31px no-repeat;
}
.rightDi {
  width: 1161px;
  height: 583px;
}
.rightDiherd {
  background: #f0f1f2;
  width: 1162px;
}
.rightDi .sensor {
  height: 61px;
  margin-left: 26px;
  width: 1162px;
  font-size: 22px;
  line-height: 61px;
  background: #f0f1f2;
  font-weight: 500;
  text-align: left;
  color: #000000;
}
.leftDi {
  width: 759px;
  height: 583px;
  position: relative;
  background: url(../../assets/imges/桥梁监测背景.png) no-repeat;
  background-size: 100%;
}
.leftDi_box {
  text-align: left;
  position: absolute;
  right: 50px;
}
.leftDi_box p {
  margin-top: 10px;
  width: 233px;
  margin-bottom: 40px;
}
.leftDi_box h2 {
  margin-top: 15px;
  width: 150px;
  line-height: 50px;
  cursor: pointer;
  text-align: center;
}

.leftDi_Nav {
  border-bottom: 4px solid #31adda;
}

.nature {
  background: url(../../assets/imges/自然资源.png) -74px -31px no-repeat;
}
.spanText {
  font-size: 16px;
  margin-right: 15px;
}
.product {
  border-bottom: 2px #31adda solid !important;
}
.logo {
  float: left;
  margin-right: 96px;
  margin-top: 8px;
}
.detailsSwitch {
  position: absolute;
  left: 900px;
  top: 120px;
  display: block;
  height: 50px;
  line-height: 50px;
  width: 128px;
  color: #31adda;
  cursor: pointer;
  font-size: 20px;
  font-family: Adobe Heiti Std R, Adobe Heiti Std R-R;
  font-weight: R;
  border-bottom: 3px #31adda solid !important;
}
.goSolutionImg img {
  margin-top: -7px;
}
/* ul {
  position: relative;
} */

ul li {
  float: left;
  display: block;
  list-style: none;
  cursor: pointer;
  width: 96px;
  height: 57px;
  opacity: 1;
  font-size: 16px;
  font-family: Noto Sans S Chinese Regular, Noto Sans S Chinese Regular-Regular;
  font-weight: 500;
  margin-left: 35px;
  text-align: center;
  line-height: 57px;
}

.footer {
}
.fr {
  float: right;
}
/deep/#tab-product {
  width: 100px !important;
}
/deep/#tab-solution {
  width: 83px !important;
}

.header {
  width: 1830px;
  position: relative;
  padding: 0 45px;
  height: 59px;
  line-height: 57px;
  border-bottom: 1px solid #c1c1c1;
  margin-top: -7px;
  opacity: 1;
  background: rgba(215, 218, 219, 0.1);
}

.loginBtn {
  position: absolute;
  right: 106px;
}

/deep/.el-tabs__nav-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  z-index: 1;
}
.hardware-header {
  position: relative;
  margin-top: -3px;
  height: 215px;
  text-align: center;
  background: url(../../assets/imges/物联网硬件.png) no-repeat;
}
.hardware-container {
  position: relative;
  height: 1050px;
  width: 1920px;
  opacity: 1;
  background: #eff5f5;
}
.saasText {
  height: 100px;
  padding-top: 33px;
}
.saas {
  font-size: 30px;
  font-family: SourceHanSansCN Normal, SourceHanSansCN Normal-Normal;
  font-weight: Normal;
  text-align: center;
}
.sass1 {
  font-size: 20px;
  font-family: SourceHanSansCN Normal, SourceHanSansCN Normal-Normal;
  font-weight: 700;
  margin-top: 10px;
  color: #444444;
  text-align: center;
}
.item {
  position: absolute;
  left: 390px;
  text-align: center;
}
.item > li {
  float: left;
  list-style: none;
  font-size: 24px;
  font-family: SourceHanSansCN Normal, SourceHanSansCN Normal-Normal;
  font-weight: Normal;
  color: #000000;
  text-align: center;
  width: 230px;
  height: 168px;
  margin: 0px;
}
.item1 {
  position: absolute;
  left: 20%;
  top: 23%;
  text-align: center;
  /* margin-bottom: 160px; */
}
.item1 .itemImg {
  margin-left: -25px;
}

.item1 .itemName {
  margin-top: -48px;
}
.item1 > li {
  float: left;
  list-style: none;
  font-size: 24px;
  font-family: SourceHanSansCN Normal, SourceHanSansCN Normal-Normal;
  font-weight: Normal;
  color: #000000;
  text-align: center;
  width: 215px;
  height: 70px;
  margin: 0px;
}
.item1 img {
  margin-top: -120px;
}
.nav_li {
  border-bottom: 4px solid #31adda;
}
.itemDetail {
  text-align: center;
  position: absolute;
  left: 300px;
  top: 360px;
}
.itemDetail1 {
  text-align: center;
  position: absolute;
  left: 300px;
  top: 660px;
  margin-top: 40px;
}
.top li {
  list-style: none;
  float: left;
  margin-left: 80px;
  cursor: pointer;
  text-decoration: none;
}
.bottom li {
  list-style: none;
  float: left;
  cursor: pointer;
  margin-left: 80px;
  text-decoration: none;
}

.leftDi > li {
  list-style: none;
}
</style>
